<template>
    <div>
        <jsscom-heard />
        <div class="cons">
            <div class="pu-con">
                <div class="gy-cons">
                    <gy-com-left
                        @onLeftTab="onLeftTab"
                        :leftTitle="leftTitle"
                        :navList="navList"
                        :curIndex="curIndex"
                    />
                    <div class="gy-r">
                        <div class="gy-r-1">
                            <p>{{ leftTitle1 }}</p>
                        </div>
                        <div class="gy-r-2">
                            <div class="news">
                                <router-link
                                    :to="{
                                        path: '/video',
                                        query: { id: item.id },
                                    }"
                                    v-for="(item, index) in newsList"
                                    :key="index"
                                >
                                    <img
                                        :src="prefixUrl + item.coverImageUrl"
                                        alt="无法显示"
                                    />
                                    <span>
                                        <h1>{{ item.title }}</h1>
                                        <p>{{ item.brief }}</p>
                                    </span>
                                </router-link>
                            </div>
                            <div class="news-page">
                                <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="totalSum"
                                    :page-size="sizeSum"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                ></el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import _ from "underscore";
import jsscomHeard from "@/components/jsscom-heard";
import comFoot from "@/components/com-foot";
import gyComLeft from "@/components/gy-com-left";

export default {
    components: {
        jsscomHeard,
        comFoot,
        gyComLeft,
    },
    data() {
        return {
            leftTitle: "作品展示",
            leftTitle1: "",
            curIndex: 0,
            navList: [
                {
                    id: 0,
                    title: "平面类",
                },
                {
                    id: 1,
                    title: "视频类",
                },
            ],
            newsList: [],
            totalSum: 3,
            sizeSum: 10,
            prefixUrl: "",
            roleType: 0,
            param: {},
        };
    },
    filters: {
        pattime(value) {
            return value.slice(0, 10);
        },
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        this.getHyzcMenu();
    },
    mounted() {},
    methods: {
        async getHyzcMenu() {
            const res = await this.$store.dispatch("news/getZuopingNavList");
            this.navList = res;
            this.param = this.navList[this.curIndex];
            this.leftTitle1 = this.param.title;
            this.getHyzcList(1);
        },

        async getHyzcList(val) {
            const data = {
                currentPage: val,
                pageSize: 10,
                parentId: this.param.id,
            };
            const res = await this.$store.dispatch(
                "news/getZuopingChildList",
                data
            );

            console.log(res);
            this.totalSum = res.totalCount;
            this.newsList = res.list;
        },
        onLeftTab(index) {
            this.curIndex = index;
            this.param = this.navList[this.curIndex];
            this.leftTitle1 = this.param.title;
            this.getHyzcList(1);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getHyzcList(val);
        },
    },
};
</script>

<style scoped>
@import "./index.css";
</style>
